<template>
  <div>
    <div><h1 style="color: #0a0a80">{{title}}</h1></div>
    <span>
      <div class="teaTable" id="c9"></div>
    </span>
  </div>
</template>

<script>
import {Chart} from '@antv/g2'
export default {
  name: "teacherAnalysis",
  data () {
    return {
      title:'老师（师资）分布图'
    }
  },


  methods: {
    test: function () {

      const chart = new Chart({
        container: 'c9', // 指定图表容器 ID
        autoFit: true, // 指定图表宽度
        height: 540, // 指定图表高度
        //width: 1000,
        padding: [20, 20, 95, 80],

      })
      // Step 2: 载入数据源
      this.getRequest('/teacher/',{}).then(resp => {
        console.log(resp)
        chart.data(resp)
        chart.scale({
          room: {type: 'linear'},
          clazz: {type: 'linear'}
        })

        chart.axis('room', {
          label: {
            formatter: (val) => {
              return +val + '教研室';
            },
          },
        });

        chart.axis('clazz', {
          label: {
            formatter: (val) => {
              return +val + '班';
            },
          },
        });


        chart
            .point()
            .position('clazz*room')
            .shape('circle')
            .color('name')
            .tooltip('name*clazz*room', (name, clazz, room) => {
              return {
                name: name + '  老师 ',
                value: clazz + '(班), ' + room + '(教研室)'
              }
            })
            .style({
              fillOpacity: 2.00
            })

        chart.tooltip({
          showTitle: false,
          showCrosshairs: true,
          crosshairs: {
            type: 'xy'
          },
          itemTpl: '<li class="g2-tooltip-list-item" data-index={index} style="margin-bottom:100px;">' +
              '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
              '{name}<br/>' +
              '{value}' +
              '</li>'
        })
        chart.interaction('legend-highlight')
        chart.render()
      })
    }

  },

  mounted () {

    this.test();
  }




}
</script>

<style >
.teaTable {
  margin-top: 10px;

}

</style>